<template>
    <div class="goods">
        <el-row :gutter="4" style="margin:10px 0px">
            <el-col :span="3">
                <el-input placeholder="按商品编号查询" v-model="goodsNumber" class="input-with-select">
                    <el-button @click="search('num')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="按商品名称查询" v-model="goodsName" class="input-with-select">
                    <el-button @click="search('name')" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="3">
                <el-cascader
                    @click.native="getData"
                    placeholder="按分类筛选"
                    v-model="value"
                    :options="options"
                    @change="handleChange"
                ></el-cascader>
            </el-col>
            <el-col :span="5">
                <el-select @change="search('status')" v-model="status" clearable placeholder="按商品状态">
                    <el-option
                        v-for="item in goodStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-popover
                    popper-class="bgColor"
                    placement="top"
                    width="200"
                    trigger="hover"
                    content="清空搜索条件或刷新页面">
                    <el-button slot="reference" type="primary" @click="search('clear')">清空/刷新</el-button>
                </el-popover>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="goodsData" style="width: 100%" border>
                <el-table-column prop="goodsNum" label="商品编号" align="center">
                </el-table-column>
                <el-table-column sortable prop="goodsName" label="名称" align="center">
                </el-table-column>
                <el-table-column prop="integral" label="积分" align="center">
                </el-table-column>
                <el-table-column prop="" label="库存" align="center">
                </el-table-column>
                 <el-table-column label="图片" align="center">
                    <template slot-scope="props">
                        <el-popover
                            placement="right"
                            trigger="click"
                            >
                            <div><img :src="props.row.thumbnail" alt=""></div>
                            <div slot="reference" style="cursor: pointer"><img :src="props.row.thumbnail" alt="" width="50"/></div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="specifications" label="规格参数" align="center">
                </el-table-column>
                <el-table-column prop="goodsSeoKeywords" label="关键词" align="center">
                </el-table-column>
                <el-table-column sortable prop="status" label="状态" align="center">
                    <template slot-scope="props">
                        <span :class="[props.row.status == '已上架' ? 'upClass' : 'downClass']">{{props.row.status}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="价格(元)/可修改" align="center">
                    <template slot-scope="props">
                        <span @click="changePrice(props.row)" v-if="props.row.priceModify==true">{{props.row.shopPrice}}</span>
                        <el-input v-if="props.row.priceModify==false" v-model="props.row.shopPrice"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="updateDate" label="上下架时间" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <span class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="upShelf(scope.row)" size="mini">
                            上架
                        </span>
                        <span class="el-tag el-tag--primary el-tag--small" style="cursor: pointer;" @click="downShelf(scope.row)" size="mini">
                            下架
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 50, 100, 200]"
                :page-size="pageSize"
                layout="->, sizes, prev, pager, next, jumper, total"
                :total="totalElements"
            ></el-pagination>
        </el-row>
        <!-- <noticeDetail :off.sync="noticeDialog" :rowData="rowdata"></noticeDetail> -->
    </div>
</template>


<script>
    import { getGoodsList, getSearchList, shelfGoods } from "@/api/store/goods.js"
    import * as util from "@/util/util.js"
    export default {
        name: "goods",
        components: {
            
        },
        computed: {
            storeId(){
                return JSON.parse(localStorage.getItem("user")).storeId;
            }
        },
        data(){
            return {
                goodsNumber: "",
                goodsName: "",
                status: "",
                goodStatus: [
                    {label: "已上架", value: 1},
                    {label: "已下架", value: 2}
                ],
                value: [],
                options: [],
                priceModify: true,
                goodsData: [],
                pageSize: 15,
                currentPage: 1,
                totalElements: 0,
                totalPages: 1,
                noticeDialog: false,
                rowdata: {}
            }
        },
        created(){
            this.getList();
        },
        methods: {
            search(type){
                this.getList(type);
            },
            getData(){
                getSearchList({storeId: this.storeId}).then(
                    res => {
                        
                    },
                    err => {}
                );
            },
            clearQuery(){

            },
            handleChange(value) {
                console.log(value);
            },
            changePrice(row){
                console.log("row", row);
                this.goodsData.forEach((e) => {
                    if(row.goodsId == e.goodsId){
                        e.priceModify = false;
                    }else{
                        e.priceModify = true;
                    }
                });
                this.$forceUpdate();
                console.log(this.goodsData);
            },
            upShelf(row){
                console.log("row", row);
                shelfGoods({gsId: 17, status: 1}).then(
                    res => {
                        this.getList();
                    },
                    err => {}
                );
            },
            downShelf(row){
                shelfGoods({gsId: 17, status: 2}).then(
                    res => {
                        this.getList();
                    },
                    err => {}
                );
            },
            getList(type){
                let obj = {
                   storeId: this.storeId,
                   currentPage: this.currentPage,
                   pageSize: this.pageSize,
                };
                if(type == "name"){
                   obj = Object.assign({goodsName: this.goodsName}, obj);
                }else if(type == "num"){
                   obj = Object.assign({goodsNum: this.goodsNumber}, obj);
                }else if(type == "status"){
                   obj = Object.assign({status: this.status}, obj);
                }else if(type == "clear"){
                    this.status = "";
                    this.goodsName = "";
                    this.goodsNumber = "";
                    obj = Object.assign({}, obj);
                }
                 getGoodsList(obj).then(
                    res => {
                        console.log("res店铺分类接口", res);
                        this.goodsData = res.data.list;
                        let temp = [];
                        this.goodsData.forEach((e) => {
                            e.goods.priceModify = true;
                            if(e.goods.status == 1){
                                e.goods.status = "已上架";
                            }else{
                                e.goods.status = "已下架";
                            }
                            e.goods.shopPrice = e.shopPrice;
                            temp.push(e.goods);
                        });
                        this.goodsData = temp;
                        // this.noticeData.forEach((e) => {
                        //     e.createDate = util.timestampToTime(e.createDate);
                        // });
                        this.totalElements = res.data.total;
                    },
                    err => {}
                );
            },
            //序号
            indexSort(index) {
                if (this.currentPage > 1) {
                    index = (this.currentPage - 1) * this.pageSize + index + 1;
                } else {
                    index = index + 1;
                }
                return index;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getList();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="less" scoped>
    .bgColor{
        background-color: black;
        color: #fff;
    }
    .upClass{
       color: rgb(103, 194, 58);
    }   
    .downClass{
        color: red;
    }
</style>
